<%--
  Created by IntelliJ IDEA.
  User: liujiajia
  Date: 2016/12/26
  Time: 上午10:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户</title>
    <meta charset="UTF-8">
    <title>Tabbar</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
</head>
<body>

<header class="m-navbar" >
    <span><i class="home-crt"></i></span>
    <div class="navbar-center" ><span class="navbar-title">用户统计</span></div>
</header>

<section class="g-scrollview">

    <div class="m-celltitle">人均数据</div>
    <div class="m-cell demo-small-pitch" style="background-color: #F5C50F;height: 60px">
        <div class="cell-item">
            <div class="cell-left"><h2>人均领用券额</h2></div>
            <div class="cell-right"><h3>${pointMap.getPointAve}</h3></div>
        </div>
    </div>
    <div class="m-cell demo-small-pitch" style="background-color: #64C2E5;height: 60px">
        <div class="cell-item">
            <div class="cell-left"><h2>人均核券额</h2></div>
            <div class="cell-right"><h3>${pointMap.usedPointAve}</h3></div>
        </div>
    </div>
    <div class="m-celltitle">综合数据</div>
    <p>
    <div class="m-cell" >
        <div class="cell-item">
            <label class="cell-right cell-arrow">
                <select class="cell-select" onchange="changeType(this.value);">
                    <option value="0">领券用户数</option>
                    <option value="1">核券用户</option>
                    <option value="2">新增粉丝</option>
                    <option value="3">用户流失数</option>
                </select>
            </label>
        </div>
    </div>

    <div class="m-button" style="float: right;padding-top: 8px">
        <a href="javascript:;" class="btn btn-hollow" onclick="changeTime(1);">当日</a>
        <a href="javascript:;" class="btn btn-hollow" onclick="changeTime(7);">7天</a>
        <a href="javascript:;" class="btn btn-hollow" onclick="changeTime(30);">30天</a>
    </div>
    <div id="c_main" style="width: 370px;height:400px;"></div>
    </p>
</section>


<jsp:include page="../mamin/footer.jsp?page=3"></jsp:include>
</body>
<script src="http://123.206.127.237:85/ydui/ecaharts/echarts.common.min.js"></script>
<script src="http://123.206.127.237:85/ydui/ecaharts/dark.js"></script>
<script>
    var ajaxpath="${pageContext.request.contextPath}";
    var myCChart;
    var type_=0;
    var xData = function() {
        var data = [];
        for (var i = 1; i < 30; i++) {
            data.push(i + "天");
        }
        return data;
    }();

    /**
     * Javascript API调用Tab
     */
    !function ($) {
        var $tab = $('#B_Tab');
        $tab.tab({
            nav: '.tab-nav-item',
            panel: '.tab-panel-item',
            activeClass: 'tab-active'
        });

        /*
         $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
         console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
         });
         */

        /*$tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
            console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
        });*/


        // 基于准备好的dom，初始化echarts实例
        myCChart = echarts.init(document.getElementById('c_main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ' '
            },
            tooltip: {},
            /* legend: {
             data:['销量']
             },*/
            xAxis: {
                data: xData
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5,100,20,40,50,60,0]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myCChart.setOption(option);


    }(jQuery);

    $(function () {
        countUserChart(type_,30);
    })

    function changeType(type){
        type_ = type;
        countUserChart(type, 30);
    }

    function changeTime(time){
        countUserChart(type_, time);
    }


    function countUserChart(type,time) {
        var url = ajaxpath + '/root_report/countUserChart.do?type='+type+'&time='+time;
        $.ajax({
            url: url,
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                if(data!=null){
                    var arrays = new Array();
                    $.each(data,function (i,obj) {
                        arrays.push(obj.user_count);
                    });

                    myCChart.clear();
                    console.log(arrays);

                    var option = {
                        title: {
                            text: ' '
                        },
                        tooltip: {},
                        /* legend: {
                         data:['销量']
                         },*/
                        xAxis: {
                            data: xData
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: data.yAxis
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myCChart.setOption(option);

                }
            }
        });
    }
</script>

</html>
